zizhujianzhan_web/pages/[dir]/[id].vue

<template>
    <!-- 页面头部 -->
    <HomePageHead></HomePageHead>
    <!-- 导航栏 -->
    <HomePageNavigation></HomePageNavigation>


    <div>当前皮肤：{{ skinId }}</div>
        <div>/sannongzixun/601517.html</div>
        <div><br/><br/><br/></div>

        
    <!-- 页面底部 -->
    <HomeFoot></HomeFoot>
</template>

<script setup>
//0.pinia单基本信息 start---------------------------------------->
//0.1获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//0.2获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref("")
//0.3获得站点基本信息
let getTemplateBaseInfo = async () => {
    const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
        method: 'GET',
        query: {
            'link_textnum':24,
            'link_imgnum':18,
            'link_footnum':4
        },
    });
    if (responseStatus.code == 200) {
        templateBaseStore.setWebSiteInfo(responseStatus.data)
        skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
    }
}
getTemplateBaseInfo();
//0.4获得广告池
let getAdList = async (adKey) => {
    const responseStatus = await requestDataPromise('/web/getWebsiteAdvertisement', {
        method: 'GET',
        query: {
            
        },
    });
    if (responseStatus.code == 200) {
        //console.log(responseStatus.data)
        templateBaseStore.setAdList(responseStatus.data)
        //获取广告
        //adImg.value = requestAd(templateBaseStore.webAdList,templateBaseStore.webSiteInfo.website_head.ad_key + "_" + "top")
    }
}
getAdList();
//0.5设置seo信息


//0.pinia单基本信息 end---------------------------------------->






//1.页面依赖 start ---------------------------------------->
import { onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElMessage, ElInput } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
//1.页面依赖 end ---------------------------------------->

//2.页面路径 start ---------------------------------------->
const targetSegment = getRoutePath(1);
let routeId;
//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if (getRouteId.code == 200) {
    routeId = getRouteId.data.category_id
} else {
    console.log("错误位置：获得页面路径")
}
//2.页面路径 start ---------------------------------------->

//3.面包屑 start ---------------------------------------->
const route = useRoute();
const articleId = parseInt(route.params.id); //获得该页面的id

//3.1 获得父级栏目的名称、id
const parent_name = ref([]);
const parent_id = ref([]);
const parent_pinyin = ref("");
const parent_children_count = ref(0)
let getParentNav = async () => {
    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
        method: 'GET',
        query: {
            'catid': routeId
        },
    });
    if (listData.code == 200) {
        parent_name.value = listData.data.alias;
        parent_id.value = listData.data.parent_id;
        parent_pinyin.value = listData.data.aLIas_pinyin;
        parent_children_count.value = listData.data.children_count;
    } else {
        console.log("错误位置：获取面包屑导航")
    }
}
getParentNav();
//3.页面依赖 end ---------------------------------------->

//4.页面数据 start ---------------------------------------->
//4.1 资讯详情
const newsDetail = ref({})
const routeNewsTtitle = ref("");
//4.2 发布日期
const time = ref("");
//4.3 路径
const routLevelTitle = ref("");
const routLevelId = ref("");
//4.4 是否展示投票
const articleChoice = ref(false);
//4.5 获取详情
async function getPageData() {
    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
        method: 'GET',
        query: {
            'articleid': articleId
        },
    });
    if (mkdata.code == 200) {
        //判断是否显示投票
        if (mkdata.data.is_survey == 1) {
            console.log("本篇文章含有投票！")
            articleChoice.value = true;
            getVoteList();
        }
        //获取内容
        newsDetail.value = mkdata.data;
        //获取路径
        routLevelTitle.value = newsDetail.value.cat_name;
        routLevelId.value = newsDetail.value.category_id;
        //获取发布时间
        time.value = newsDetail.value.updated_at.split(' ')[0];
        //修正标题长度
        if (newsDetail.value.title.length >= 20) {
            routeNewsTtitle.value = newsDetail.value.title.substr(0, 20) + "...";
        } else {
            routeNewsTtitle.value = newsDetail.value.title
        }
    } else {
        console.log("错误位置：获取详情内容")
    }
}
getPageData();
//4.页面数据 end ---------------------------------------->

//5.广告 start ---------------------------------------->
let adImg1 = ref([]);
let adImg2 = ref([]);

onMounted(async () => {
    const { $webUrl, $CwebUrl } = useNuxtApp();
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmw_detail_0001`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg1.value = resultAd1.data[0];
    //广告2
    let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmw_detail_0002`
    const responseAd2 = await fetch(url2, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd2 = await responseAd2.json();
    adImg2.value = resultAd2.data[0];
})
//5.广告 end ---------------------------------------->

//6.设置seo信息 start---------------------------------------->
const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
    method: 'GET',
    query: {
        'articleid': articleId
    },
});
if (setData.code == 200) {
    let seoTitle = setData.data.title;
    let seoDescription = setData.data.introduce;
    let seoKeywords = setData.data.keyword;
    let seoSuffix = setData.data.suffix;
    let seoName = setData.data.website_name;

    useSeoMeta({
        title: seoTitle + "_" + seoName + "_" + seoSuffix,
        meta: [
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
        ]
    });
} else {
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    console.log("错误位置：设置详情页面SEO数据")
    console.log("后端错误反馈：", setData.message)
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//6.设置seo信息 end---------------------------------------->

//7.投票 start---------------------------------------->
const radio1 = ref(''); //单选
const check1 = ref([]); //多选
const isDisabled = ref(false);//是否禁用提交按钮
const isRadio = ref(true);//是否渲染单选

const userSurId = ref('');//投票属于哪一篇文章
const userChoice = ref('');//用于判断用户选择了其他选项以后，输入的值
const userIsChoice = ref('');//用于判断其他选项目前是什么值
const showUserChoice = ref(false);//是否显示其他输入框
const websiteSurveyData = ref([]);//投票结果

//7.2获得投票列表
let voteList = ref([]);
async function getVoteList() {
    const voteData = await requestHome('/web/getWebsiteSurvey', { method: 'GET', query: { 'art_id': articleId } });
    console.log(778899)
    console.log(voteData)
    if (voteData.code == 200) {
        voteList.value = voteData.data;
        console.log(voteList.value)
        //判断显示单选还是多选
        //survey_type 0是单选 1是多选
        if (voteData.data[0].survey_type == 0) {
            isRadio.value = true;
            console.log("1111")
        } else {
            isRadio.value = false;
        }
        //把最后一个的值拿出来 用于判断用户是否选择了其他
        for (let item of voteData.data) {
            //如果含有其他
            if (item.is_other == 1) {
                userIsChoice.value = item.id;
            }
        }
        //用户投票属于哪一篇文章
        userSurId.value = voteData.data[0].sur_id;

    } else {
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        console.log("错误位置：首页投票")
        console.log("后端错误反馈：", voteData.message)
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}


//7.3当用户选择了选项，判断是否展示其他输入框
const handleRadioChange = (value) => {
    if (value == userIsChoice.value) {
        showUserChoice.value = true;
    } else {
        showUserChoice.value = false;
    }
}

const handleCheckboxChange = (value) => {
    if (value.includes(userIsChoice.value)) {
        showUserChoice.value = true;
    } else {
        showUserChoice.value = false;
    }
}

//7.4发起投票
async function addWebsiteSurvey() {
    //判断当前是单选还是多选
    console.log(isRadio.value)
    if (isRadio.value) {
        console.log("用户单选！")
        if (radio1.value != '') {
            //先判断一下是否使用了其他选项
            if (showUserChoice.value) {
                if (userChoice.value != '') {
                    //文章id
                    // console.log(userSurId.value)
                    // 用户输入的值
                    // console.log(userChoice.value)
                    //如果使用了其他，其他的选项需要增加进去
                    const ChoiceData = await requestHome('/web/addWebsiteSurveyOption', {
                        method: 'GET',
                        query: {
                            'sur_id': userSurId.value,//投票的新闻id
                            'choice_name': userChoice.value,//投票的选项id
                        }
                    });
                    if (ChoiceData.code == 200) {
                        //提交完其他选项以后，再正式发起投票
                        const mkData = await requestHome('/web/addWebsiteSurveyVote', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,
                                'choice_id': ChoiceData.data
                            }
                        });
                        if (mkData.code == 200) {
                            ElMessage.success('投票成功！')
                            //把投票结果显示到页面上 禁用投票按钮
                            isDisabled.value = true;
                            websiteSurveyData.value = mkData.data;
                            //遍历一下，把用户选中的那个设置status为1
                            let data = mkData.data;
                            //遍历一下，把用户选中的那个设置status为1
                            for (let item of data.data) {
                                for (let i of data.choice) {
                                    if (item.id == i) {
                                        console.log(item.id)
                                        item.status = 1;
                                    }
                                }
                            }
                            websiteSurveyData.value = data;
                        } else {
                            ElMessage.error(mkData.message)
                        }
                    } else {
                        ElMessage.error('其他投票失败！')
                    }
                } else {
                    ElMessage.error('请输入选项内容！')
                }
            } else {
                //如果没选择其他，直接提交选择的内容
                const mkData = await requestHome('/web/addWebsiteSurveyVote', {
                    method: 'GET',
                    query: {
                        'sur_id': userSurId.value,
                        'choice_id': radio1.value
                    }
                });
                if (mkData.code == 200) {
                    ElMessage.success('投票成功！')
                    //把投票结果显示到页面上 禁用投票按钮
                    isDisabled.value = true;
                    let data = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    for (let item of data.data) {
                        for (let i of data.choice) {
                            if (item.id == i) {
                                item.status = 1;
                            }
                        }
                    }
                    websiteSurveyData.value = data;
                } else {
                    ElMessage.error('投票失败！')
                }
            }
        } else {
            ElMessage.error('请选择一个选项')
        }
    } else {
        console.log("多选！")
        //多选
        if (check1.value != []) {
            //先判断一下是否使用了其他选项
            if (showUserChoice.value) {
                if (userChoice.value != '') {
                    //判断用户是否只选择了一个其他
                    if (check1.value.length == 1) {
                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,//投票的新闻id
                                'choice_name': userChoice.value,//用户输入的其他选项文字
                            }
                        });
                        if (ChoiceData.code == 200) {
                            //提交完其他选项以后，再正式发起投票
                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
                                method: 'GET',
                                query: {
                                    'sur_id': userSurId.value,
                                    'choice_id': ChoiceData.data
                                }
                            });
                            if (mkData.code == 200) {
                                ElMessage.success('投票成功！')
                                //把投票结果显示到页面上 禁用投票按钮
                                isDisabled.value = true;
                                websiteSurveyData.value = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                let data = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                for (let item of data.data) {
                                    for (let i of data.choice) {
                                        if (item.id == i) {
                                            console.log(item.id)
                                            item.status = 1;
                                        }
                                    }
                                }
                                websiteSurveyData.value = data;
                            } else {
                                ElMessage.error(mkData.message)
                            }
                        } else {
                            ElMessage.error('其他投票失败！')
                        }

                    } else {
                        //用户选择了除了其他以外，还包括别的选项
                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,//投票的新闻id
                                'choice_name': userChoice.value,//用户输入的其他选项文字
                            }
                        });
                        if (ChoiceData.code == 200) {
                            let data = check1.value;
                            //找到多选的数组，把其他默认值给替换掉
                            for (let i = 0; i < data.length; i++) {
                                if (data[i] == userIsChoice.value) {
                                    data[i] = ChoiceData.data;
                                }
                            }
                            let jsonArray = JSON.stringify(data);
                            //提交完其他选项以后，再正式发起投票
                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
                                method: 'GET',
                                query: {
                                    'sur_id': userSurId.value,
                                    'choice_id': jsonArray
                                }
                            });

                            if (mkData.code == 200) {
                                ElMessage.success('投票成功！')
                                //把投票结果显示到页面上 禁用投票按钮
                                isDisabled.value = true;
                                websiteSurveyData.value = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                let data = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                for (let item of data.data) {
                                    for (let i of data.choice) {
                                        if (item.id == i) {
                                            //console.log(item.id)
                                            item.status = 1;
                                        }
                                    }
                                }
                                websiteSurveyData.value = data;
                            } else {
                                ElMessage.error(mkData.message)
                            }
                        } else {
                            ElMessage.error('其他投票失败！')
                        }

                    }
                } else {
                    ElMessage.error('请输入选项内容！')
                }
            } else {
                let jsonArray = JSON.stringify(check1.value);
                //如果没选择其他，直接提交选择的内容
                const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
                    method: 'GET',
                    query: {
                        'sur_id': userSurId.value,
                        'choice_id': jsonArray
                    }
                });
                if (mkData.code == 200) {
                    ElMessage.success('投票成功！')
                    //把投票结果显示到页面上 禁用投票按钮
                    isDisabled.value = true;
                    websiteSurveyData.value = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    let data = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    for (let item of data.data) {
                        for (let i of data.choice) {
                            if (item.id == i) {
                                console.log(item.id)
                                item.status = 1;
                            }
                        }
                    }
                    websiteSurveyData.value = data;
                } else {
                    ElMessage.error('投票失败！')
                }
            }
        } else {
            ElMessage.error('请选择一个选项')
        }
    }
}
//7.投票 end---------------------------------------->

//8.页面图片放大 start---------------------------------------->
const previewVisible = ref(false)
const selectedImage = ref(' ')

const openPreview = (event) => {
    if (event.target.tagName === 'IMG') {
        selectedImage.value = event.target.src;
        previewVisible.value = true;
    }
}
const closePreview = () => {
    previewVisible.value = false;
}
//8.页面图片放大 end---------------------------------------->
</script>

<style lang="less" scoped>
@import url('@/assets/css/detail.less');
</style>